	<template>
		<gui-page :customHeader="true" :headerClass="['gui-bg-white']" ref="guiPage" :fullPage="true">
			<!-- 自定义头部导航 -->
			<template v-slot:gHeader>
				<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
					<!-- 使用组件实现返回按钮及返回首页按钮 -->
					<gui-header-leading :home="false"></gui-header-leading>
					<!-- 导航文本此处也可以是其他自定义内容 -->
					<view style="width:60rpx;"></view>
					<text class="gui-flex1 gui-text-center gui-ellipsis">修改密码</text>
					<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
					<!-- 实际宽度请根据自己情况设置 -->
					<view style="width:120rpx;"></view>
					<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
				</view>
			</template>
			<template v-slot:gBody>
				<view style="padding:50rpx;">
					<view style="height:150rpx;"></view>
					<view class="gui-h2">
						修改密码
					</view>

					<view style="margin-top:80rpx;">
						<form @submit="submit">
							<text class="hulu-font-2">
								名称：{{name}}
							</text>
							<view class="" style="height:60rpx;">
								
							</view>
							<view>
								<text class="gui-text-small gui-color-gray">密码</text>
							</view>

							<view class="gui-border-b">
								<input type="password" class="gui-form-input" v-model="password" name="password"
									placeholder="您的密码" />
							</view>

							<view>
								<text class="gui-text-small gui-color-gray">确认密码</text>
							</view>

							<view class="gui-border-b">
								<input type="password" class="gui-form-input" v-model="confirm_password"
									name="confirm_password" placeholder="确认密码" />
							</view>
							<view style="margin-top:38rpx;">
								<button type="default" class="gui-button gui-bg-primary gui-noborder" formType="submit"
									style="border-radius:50rpx;">
									<text class="gui-color-white gui-button-text">立即修改</text>
								</button>
							</view>
						</form>
					</view>


					<view
						class="gui-flex gui-row gui-nowrap gui-justify-content-center gui-align-items-center gui-margin-top"
						@tap="toLogin">
						<text class="gui-color-blue gui-text-center gui-text-small">重新登陆</text>
					</view>
				</view>
			</template>
		</gui-page>
	</template>
	<script>
		import request from '@/utils/request'
		import graceChecker from "@/Grace6/js/checker.js";
		import useUser from '@/api/user';
		const {userResetPwd} = useUser();
		export default {
			data() {
				return {
					name:"",
					password: "",
					confirm_password: "",
				}
			},
			created() {
				let user = uni.getStorageSync("user")
				if (user) {
					this.name = JSON.parse(user)['name']
				}
			},
			methods: {
				loginbypwd: function() {
					console.log('请自行完善代码');
				},
				submit: async function(e) {
					console.log(e.detail.value);
					// 请利用 graceUI 的表单验证工具
					// 根据项目需要完成数据验证工作
					var formData = e.detail.value;
					console.log(formData);
					// 利用 graceUI 的表单验证工具进行验证
					//定义表单规则
					var rule = [{
							name: "mobile",
							checkType: "phone",
							checkRule: "",
							errorMsg: "手机号码有误"
						},
						{
							name: "password",
							checkType: "reg",
							checkRule: "^[a-zA-Z0-9]{6,8}$",
							errorMsg: "密码6-8位必须包含字母数字"
						},
						{
							name: "confirm_password",
							checkType: "reg",
							checkRule: "^[a-zA-Z0-9]{6,8}$",
							errorMsg: "确认密码6-8位必须包含字母数字"
						},
					];
					var checkRes = graceChecker.check(formData, rule);

					if (checkRes) {
						if (formData.password != formData.confirm_password) {
							uni.showToast({
								title: "2次密码不一致!",
								icon: "none"
							});
							return;
						}
						uni.showToast({
							title: "处理中...",
							icon: "none"
						});
						await userResetPwd(formData)
					} else {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
					}

				},
				toLogin() {
					uni.clearStorage()
					uni.$roles = null;
					uni.reLaunch({
						url:`/subpage/login/index`
					})
				}
			}
		}
	</script>
	<style scoped>
		.login-logo {
			width: 180rpx;
			height: 180rpx;
			font-size: 80rpx;
			text-align: center;
			line-height: 120rpx;
			padding: 30rpx;
			border-radius: 18rpx;
		}

		.other-login-icons {
			width: 88rpx;
			height: 88rpx;
			text-align: center;
			font-size: 70rpx;
			margin: 20rpx;
		}

		.sendmsg {
			height: 30rpx;
			width: 200rpx;
			font-size: 24rpx;
			line-height: 30rpx;
		}
	</style>